<template>
    <div class="container">
        <h1>事件修饰符</h1>
        <div class="container_1" @click="parentClick">
            外面的点击事件
            <!-- .stop可以阻止事件冒泡传递 @click.stop-->
            <button @click="childClick">stop点击</button>
        </div>
        <div class="container_1">
            <!-- @submit.prevent 是一个事件修饰符，表示在表单提交时，先调用 preventDefault() 方法，
             阻止默认的提交行为（即刷新页面） -->
            <form @submit="handleSubmit">
                <input type="text" placeholder="输入..." />
                <button>提交</button>
            </form>
            <form @submit.prevent="handleSubmit">
                <input type="text" placeholder="输入..." />
                <button type="submit">提交</button>
            </form>
        </div>
        <div class="container_1">
            <!-- .self
                作用：仅当事件从事件目标自身触发时才处理事件。 -->
            <div @click.self="selfClick">
                self点击我
                <button>按钮</button>
            </div>
        </div>
        <div class="container_1" @click.capture="parentClick">
            <!-- .capture 修饰符
            使用 .capture 修饰符时，指定事件监听器在捕获阶段触发，而不是在冒泡阶段。
            这意味着在事件到达目标元素之前，可以先在其父元素或祖先元素上处理事件。 -->
            capture点击我
            <button @click="childClick">点击按钮</button>
        </div>
        <div class="container_1" @click.once="handleOnce">
            <!-- .once
                作用：确保事件只会触发一次。 -->
            once点击我
        </div>
        <div @scroll.passive="handleScroll" style="height: 200px; overflow: auto;">
            <!-- 用途：.passive 修饰符用于声明事件处理程序不会调用 event.preventDefault()，帮助浏览器优化性能。
                应用场景：特别适用于滚动和触摸事件的处理，能显著改善用户体验和界面响应。 -->
            <div style="height: 600px;">Scroll me!</div>
        </div>
    </div>
</template>

<script setup>

const parentClick = () => {
    alert("外面的弹出框")
}
const childClick = () => {
    alert("按钮的弹出框")
}

const handleSubmit = () => {
    alert('表单提交!');
}

const selfClick = () => {
    alert('self的div点击!');
}

const handleOnce = () => {
    alert('Once弹出')
}

const handleScroll = () => {
    console.log('Scrolling...');
}
</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}

.container_1 {
    background-color: rgb(215, 215, 215);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
</style>